<template>
<div class="my-tag-warp">
    <p class="label">管理我的文章标签</p>
    <div class="add-tag-btn-warp">
        <div><el-button class="pink-btn" icon="el-icon-plus" @click="addTag">新增TAG</el-button></div>
    </div>
    <div class="my-tag-list-warp">
        <myTagList :isLoading="tagDataIsLoading" :myTagList="myTagListData"></myTagList>
    </div>
    <div v-if="isHaveMoreTagDataBtn">
        <div  v-if="isHaveTagListData" ><el-button class="more-data-btn" @click="moreTagDataBtnClick" type="primary" :loading="tagDataIsLoading">{{tagDataIsLoading?"加载中":"点击加载更多TAG"}}</el-button></div>
        <div v-else><el-button class="have-no-data-info" disabled>已经没有了呀</el-button></div>
    </div>
</div>
</template>

<script>
import myTagList from '@/components/profileComponents/myTagList';
import {request} from '@/network/request.js';
export default {
    name:"myTag",
    components:{
        myTagList
    },
    data(){
        return {
            isHaveTagListData:true,
            tagDataIsLoading:false,
            tagListIndex:0,
            myTagListData:[],
            isHaveMoreTagDataBtn:false
        }
    },
    methods:{
        addTag(){
            this.$prompt('新增TAG名称', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputValidator:value=>{
                    let regInput=/^[^ ]+$/;
                    if(!value){
                        return "你还没有输入内容呀";
                    }
                    if(value.length>15){
                        return "输入的TAG名字不能超过20字符哦";
                    }
                    if(!regInput.test(value)){
                        return "TAG不能包含空格";
                    }
                    return true;
                },
                inputPlaceholder:"新的TAG"
            }).then(({ value }) => {
                const loading = this.$loading({
                        lock: true,
                        text: '操作中',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                        });
                request({
                    url:"/tag/addTag",
                    method:"post",
                    data:{
                        userId:this.$store.getters.getCurrentUser.userId,
                        tagName:value
                    }
                }).then(res=>{
                    console.log(res);
                    loading.close();
                    if(res.data.status==="ok"){
                        this.myTagListData.unshift(res.data.newTag);
                    }else{
                        this.$message.error('新增的tag可能已经重复');
                    }
                }).catch(err=>{
                    console.log(err);
                    loading.close();
                    this.$message.error('服务器出错请稍后再试');
                });
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '取消输入'
            });       
        });
        },
        moreTagDataBtnClick(){
        this.tagDataIsLoading=true;
        this.tagListIndex++;
        request({
        url:"/tag/tagList/"+this.$store.getters.getCurrentUser.userId+"/"+this.tagListIndex
        }).then(res=>{
        console.log(res);
        if(res.data.tagList.length>0){
          //拿过来的数据去重
            let obj={};
            this.myTagListData=this.myTagListData.concat(res.data.tagList).reduce((item,next)=>{
              obj[next.tagId]?"":obj[next.tagId]=true&&item.push(next);
              return item;
            },[]);
                this.tagDataIsLoading=false;
                this.isHaveTagListData=true;
            }else{
                this.tagDataIsLoading=false;
                this.isHaveTagListData=false;
            }
            }).catch(err=>{
                console.log(err);
                this.$message.error('获取数据失败，请稍后再试');
                this.tagDataIsLoading=false;
                this.isHaveTagListData=true;
                this.tagListIndex--;
            })
        }
    },
    created(){
        request({
            url:"/tag/tagList/"+this.$store.getters.getCurrentUser.userId+"/0"
        }).then(res=>{
            console.log(res);
            this.myTagListData=res.data.tagList;
            if(res.data.tagList.length>=6){
                this.isHaveMoreTagDataBtn=true;
            }
        }).catch(err=>{
            console.log(err);
        })
    }
}
</script>

<style>
.add-tag-btn-warp {
    padding: 10px 0;
    display: flex;
    justify-content: flex-end;
}
</style>